<template>
  <div class="user">
    <div v-if="userList.length != 0">
      <div class="content">
        <div v-for="item in userList" :key="item.id">
          <div class="content_item_pic">
            <GlobalImageDeep
              :imgWidth="155"
              :imgHeight="155"
              :url="item.avatarUrl"
            />
          </div>
          <div
            class="content_item_name one_txt_cut"
            @click="$router.push(`/userDetails/${item.userId}`)"
          >
            {{ item.nickname }}
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <el-row type="flex" justify="center" style="padding-top: 20px">
        <el-pagination
          layout="total,prev, pager, next"
          :total="total"
          :page-size="queryInfo.limit"
          @current-change="paginationCurrentChange"
          :current-page="currentPage"
          popper-class="select"
        >
        </el-pagination>
      </el-row>
    </div>
    <el-row v-else type="flex" justify="center" style="padding-top: 20px">
      <img
        src="../../../assets/images/loading.3708220b.gif"
        alt=""
        height="200"
        width="200"
      />
    </el-row>
  </div>
</template>

<script>
import { getSearch } from "../../../api/searchApi";
export default {
  name: "user",
  props: {
    search: {
      required: true,
      type: String,
    },
  },
  components: {},
  data() {
    return {
      userList: [],
      queryInfo: {
        keywords: this.search,
        limit: 20,
        offset: 0,
        type: 1002,
      },
      total: "",
      currentPage: 1,
    };
  },
  watch: {
    search(newValue) {
      if (newValue.length !== 0) {
        this.queryInfo = {
          keywords: this.search,
          limit: 20,
          offset: 0,
          type: 1004,
        };
        this.total = 0;
        this.currentPage = 1;
        this.getSearchMethod();
      }
    },
  },
  created() {
    this.getSearchMethod();
  },
  methods: {
    async getSearchMethod() {
      let result = await getSearch(this.queryInfo);
      if (result.code === 200) {
        this.userList = result.result.userprofiles;
        this.total = result.result.userprofileCount;
      }
    },
    paginationCurrentChange(newPage) {
      this.queryInfo.offset = (newPage - 1) * this.queryInfo.limit;
      this.currentPage = newPage;
      // this.albumsList = [];
      this.getSearchMethod();
      this.$utils.scrollTop(0, 200);
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.user {
  /deep/ .el-image {
    img {
      border-radius: 50%;
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 15px;
    > div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 220px;
      height: 224px;
      border-radius: 8px;
      background-color: #f8f8f8;
      margin-bottom: 15px;
      .content_item_pic {
        width: 155px;
        height: 155px;
      }
      .content_item_name {
        padding-top: 10px;
        font-size: 14px;

        &:hover {
          color: @globalColor;
          cursor: pointer;
          animation: bounce 1s;
        }
      }
    }
  }
}
</style>
